<template>
	<!-- <view id="container" class=""></view> -->
	<view class="container">





		<!-- 头部导航 -->
		<view class="header">
			<text class="title">宝丰县安全生产风险点分布图</text>
			<!-- <text class="subtitle">点击乡镇区域查看详细信息</text> -->
			<!-- <text class="date">{{currentDate}}</text> -->
		</view>


		<!-- 主体内容 -->
		<view class="main-content">

			<!-- 侧边栏 -->
			<view class="sidebar">

				<view class="action-buttons" style="display: flex;flex-direction: column;">
					<button class="btn" :class="style==2&show_map==1?'btn-2':'btn-1'" @click="changeStyle(2)">
						<text>乡镇分布</text>
					</button>
					
					<button class="btn" :class="style==1&show_map==1?'btn-2':'btn-1'" @click="changeStyle(1)">
						<text>行业分布</text>
					</button>

					<button class="btn" :class="show_map==2?'btn-2':'btn-1'" @click="toggleDrawerRight()">
						<text>检查标准</text>
					</button>
				</view>

			</view>


			<!-- 检查清单 -->
			<view class="" style="background-color: #f4f4f4;padding: 50px;width: 90%;padding-top: 30rpx;height: 100%;" v-show="show_map==2">
				<view class="" style="background-color: #fff;padding: 60px;padding-top: 10px;">
					<view class="title">
						检查标准
					</view>
					<!-- 搜索栏 -->
					<view class="search-container">
						<view class="search-form">
						
			
							<!-- 行业类型 -->
							<view class="form-item">
								<text class="item-label">行业类型</text>
								
									
									<view class="item-input">
										<picker style="width: 200rpx;" mode="selector" @change="bindPickerChangeFileType"
											 :range="file_type_list">
											<text :class="['selected-text', !file_type ? 'placeholder' : '']">
												{{ file_type==''? '请选择行业类型': file_type}}
											</text>
										</picker>
									
									</view>
									
							</view>
					
							<!-- 文件名字 -->
							<view class="form-item">
								<text class="item-label">文件名字</text>
								<input class="item-input" placeholder="请输入文件名字" v-model="file_name"
									placeholder-class="placeholder" />
							</view>
					
					
					
							<!-- 操作按钮 -->
							<view class="action-buttons">
								<button class="btn reset" style="width: 180rpx;" @click="resetFileForm">重置</button>
								<button class="btn search" style="width: 180rpx;" @click="handleSearchFile">搜索</button>
							</view>
						</view>
					</view>
					<!-- 搜索栏结束 -->
					
					
					<view class="right-content" style="margin-top: 0px;">
						<view class="top" style="width: 10%;">
							序号
						</view>

						<view class="top" style="width: 20%;">
							行业分类
						</view>
						
						<view class="top" style="width: 40%;">
							文件名字
						</view>

						<view class="top" style="width: 15%;">
							更新时间
						</view>

						<view class="top" style="width: 15%;">
							操作
						</view>
					</view>
					<scroll-view scroll-y="true" style="" class="scroll-style">
						<view class="right-content-list" :style="index%2==0?'':'background-color: #f4f4f4;'"
							v-for="(item,index) in standard_list" :key="item.id">
							<view class="item" style="width: 10%;">
								{{index+1}}
							</view>
						
							<view class="item" style="width: 20%;">
								{{item.industry_type}}
							</view>
							
							<view class="item" style="width: 40%;">
								{{item.file_name}}
							</view>
						
							<view class="item" style="width: 15%;">
								{{item.update_time}}
							</view>
							<view class="item"
								style="width: 15%;display: flex;align-items: center;justify-content: space-around;">
								<view class="" style="color: #3498db;" @click="previewDoc(item.file_ulr)">
									预览
								</view>
								<view class="" style="color: #2979ff;" @click="downloadDoc(item.file_ulr)">
									下载
								</view>
							</view>
						</view>
						
						
						
					</scroll-view>
					
				</view>

			</view>


			<!-- 地图容器 -->
			<view class="container" v-show="show_map==1">
				<!-- 搜索栏 -->
				<view class="search-container">
					<view class="search-form">
						<!-- 风险等级 -->
						<view class="form-item">
							<text class="item-label">风险等级</text>
							<view class="item-input">

								<picker style="width: 200rpx;" mode="selector" @change="bindPickerChange2"
									:value="risk_index" :range="riskLevelOptions">
									<!-- <view class="">{{area_list[township_index]}}</view> -->
									<text :class="['selected-text', !formData.riskLevel ? 'placeholder' : '']">
										{{ formData.riskLevel==''? '请选择风险等级': formData.riskLevel}}
									</text>
								</picker>
							</view>
						</view>


						<!-- 乡镇区域 按乡镇分布的时候才有该搜索-->
						<view class="form-item" v-if="style==2">
							<text class="item-label">乡镇区域</text>
							<view class="item-input">
								<picker style="width: 200rpx;" mode="selector" @change="bindPickerChange"
									:value="township_index" :range="area_list">
									<!-- <view class="">{{area_list[township_index]}}</view> -->
									<text :class="['selected-text', !formData.township ? 'placeholder' : '']">
										{{ formData.township==''? '请选择乡镇区域': formData.township}}
									</text>
								</picker>

							</view>
						</view>

						<!-- 所在行政村社区 按行业分布的时候才有该搜索-->
						<view class="form-item" v-if="style==1">
							<text class="item-label">所在行政村社区</text>
							<input class="item-input" placeholder="请输入行政村社区" v-model="formData.area"
								placeholder-class="placeholder" />
						</view>

						<!-- 行业类型 -->
						<view class="form-item">
							<text class="item-label">行业类型</text>
							<!-- <input class="item-input" placeholder="请输入行业类型" v-model="formData.industry"
								placeholder-class="placeholder" /> -->
								
								<view class="item-input">
									<picker style="width: 200rpx;" mode="selector" @change="bindPickerChangeType"
										:value="type_index" :range="type_list">
										<!-- <view class="">{{area_list[township_index]}}</view> -->
										<text :class="['selected-text', !formData.industry ? 'placeholder' : '']">
											{{ formData.industry==''? '请选择行业类型': formData.industry}}
										</text>
									</picker>
								
								</view>
								
						</view>

						<!-- 风险点名称 -->
						<view class="form-item">
							<text class="item-label">风险点名称</text>
							<input class="item-input" placeholder="请输入风险点名称" v-model="formData.companyName"
								placeholder-class="placeholder" />
						</view>



						<!-- 操作按钮 -->
						<view class="action-buttons">
							<button class="btn reset" @click="resetForm">重置</button>
							<button class="btn search" @click="handleSearch">搜索</button>
						</view>
					</view>
				</view>
				<!-- 搜索栏结束 -->


				<view id="container" class="map-view">
					<!-- 中间组件 -->
					<!-- 弹窗组件 -->
					<view v-if="showPopup" class="center-box" style="">
						<view class="title-info" style="">
							<view class="title-info-title">
								风险点信息
							</view>
							<view class="title-info-close" @click="closeDrawerCenter">
								<text>×</text>
							</view>
						</view>

						<scroll-view scroll-y="true" style="max-height: 50vh;">
							<view class="center-box-title">
								风险点名称
							</view>
							<view class="center-box-content">
								{{company_info.company_name || '暂无'}}
							</view>

							<view class="center-box-title">
								企业简称
							</view>
							<view class="center-box-content">
								{{company_info.short_name || '暂无'}}
							</view>

							<view class="center-box-title">
								行业类型
							</view>
							<view class="center-box-content">
								{{company_info.type || '暂无'}}
							</view>

							<view class="center-box-title">
								所在行政村社区
							</view>
							<view class="center-box-content">
								{{company_info.area || '暂无'}}
							</view>

							<view class="center-box-title">
								风险等级
							</view>
							<view class="center-box-content">
								<text v-if="company_info.danger_level == '1'" style="color: #447ed9;">{{'低风险'}}</text>
								<text v-if="company_info.danger_level == '2'" style="color: #ffaa00;">{{'一般风险'}}</text>
								<text v-if="company_info.danger_level == '3'" style="color: #ff5500;">{{'较大风险'}}</text>
								<text v-if="company_info.danger_level == '4'" style="color: #ff0000;">{{'重大风险'}}</text>

							</view>

							<view class="center-box-title">
								责任部门/责任人
							</view>
							<view class="center-box-content">
								{{company_info.responsible_department || '暂无'}}
							</view>

							<view class="center-box-title">
								经纬度
							</view>
							<view class="center-box-content">
								{{company_info.lng+','+company_info.lat}}
							</view>

							<view class="center-box-title">
								主要安全风险说明
							</view>
							<view class="center-box-content">
								{{company_info.main_risk || '暂无'}}
							</view>

							<view class="center-box-title">
								管控措施
							</view>
							<view class="center-box-content">
								{{company_info.control_measures || '暂无'}}
							</view>
							<view class="center-box-title">
								企业/单位简介
							</view>
							<view class="center-box-content">
								{{company_info.content || '暂无'}}
							</view>
						</scroll-view>


					</view>
					<view class="mask-center" :class="{centershow: showPopup }" @tap="closeDrawerCenter"></view>


					<!-- 下方四色图显示 -->
					<!-- 	<view class="risk-box">
						<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" />
					</view> -->
					<view class="risk-color">
						<view class="risk-color-item" style="background-color: #0ed300;">
							{{'单位总数量:' + all_datas.count + '个' }}
						</view>
						<view class="risk-color-item" style="background-color: #ff0000;">
							{{'重大风险(Ⅰ级)单位:' + all_datas.level_great + '个'}}
						</view>
						<view class="risk-color-item" style="background-color: #ff5500;">
							{{'较大风险(Ⅱ级)单位:' + all_datas.level_high + '个'}}
						</view>
						<view class="risk-color-item" style="background-color: #ffaa00;">
							{{'一般风险(Ⅲ级)单位:' + all_datas.level_general + '个'}}
						</view>
						<view class="risk-color-item" style="background-color: #447ed9;">
							{{'低风险(Ⅳ级)单位:' + all_datas.level_low + '个'}}
						</view>
					</view>

					<!-- 下侧圆形按钮 -->
					<view class="floating-btn" :class="{ rotated: drawerVisible }" @tap="toggleDrawer">
						<view class="arrow"></view>
					</view>

					<!-- 右侧侧圆形按钮 -->
					<!-- <view class="floating-btn-right" :class="{ rotated_right: drawerVisible_right }"
						@tap="toggleDrawerRight">
						<view class="arrow-right"></view>
					</view> -->


					<!-- 右侧抽屉组件 -->
					<!-- <right-drawer :title="'检查标准'" :visible="drawerVisible_right" @close="closeDrawerRight">
						<scroll-view scroll-y="true" style="max-height: 50vh;">
							<view class="right-content">
								<view class="top" style="width: 10%;">
									序号
								</view>

								<view class="top" style="width: 30%;">
									行业分类
								</view>

								<view class="top" style="width: 30%;">
									更新时间
								</view>

								<view class="top" style="width: 30%;">
									操作
								</view>
							</view>
							<view class="right-content-list" v-for="item in standard_list" :key="item.id">
								<view class="item" style="width: 10%;">
									{{item.id}}
								</view>

								<view class="item" style="width: 30%;">
									{{item.industry_type}}
								</view>

								<view class="item" style="width: 30%;">
									{{item.update_time}}
								</view>

								<view class="item"
									style="width: 30%;display: flex;align-items: center;justify-content: space-around;">
									<view class="" style="color: #3498db;" @click="previewDoc(item.file_ulr)">
										预览
									</view>
									<view class="" style="color: #2979ff;" @click="downloadDoc(item.file_ulr)">
										下载
									</view>
								</view>
							</view>
						</scroll-view>
					</right-drawer> -->
					<!-- 右侧抽屉组件结束 -->


					<!-- 遮罩层 -->
					<view class="mask" :class="{ show: drawerVisible }" @tap="closeDrawer"></view>

					<!-- <uni-tooltip>
						<template v-slot:content>
							<view class="risk-ida">
								{{item.company_name}}
							</view>
						</template>
					</uni-tooltip> -->

					<!-- 下方抽屉组件 -->
					<view class="drawer" :class="{ show: drawerVisible }" @tap="stopPropagation">
						<view class="drawer-header">
							<text class="drawer-title">风险点列表</text>
							<!-- <view class="close-btn" @tap="closeDrawer">×</view> -->
						</view>

						<view class="drawer-content" style="position: relative;">

							<scroll-view style="max-height: 30vh;" scroll-y>
								<!-- 风险点列表 -->
								<view class="risk-list" style="background-color: #ffff00;">
									<view class="risk-list-item" style="width: 5.55%;">
										序号
									</view>
									<view class="risk-list-item" style="width: 11.15%;">
										行业类型
									</view>


									<view class="risk-list-item" style="width: 13.78%;">
										风险点名称
									</view>
									<view class="risk-list-item" style="width: 13.85%;">
										所在行政区
									</view>
									<view class="risk-list-item" style="width: 22.2%;">
										主要安全风险说明
									</view>
									<view class="risk-list-item" style="width: 11.1%;">
										风险颜色
									</view>
									<view class="risk-list-item" style="width: 11.1%;">
										管控措施
									</view>
									<view class="risk-list-item" style="width: 11.0%;">
										责任部门
									</view>
								</view>


								<view class="risk-list" v-for="item in company_list" :key="item.id" @click="open(item)">
									<view class="risk-list-item" style="width: 5.6%;">
										{{item.sort}}
									</view>

									<!-- <view class="risk-list-item" style="width: 11.2%;">
										{{item.type}}
									</view> -->

									<uni-tooltip style="width: 11.2%;" placement="right">
										<view class="risk-list-item" style="width: 100%;">
											{{item.type}}
										</view>

										<template v-slot:content>
											<view>
												{{item.type}}
											</view>
										</template>
									</uni-tooltip>


									<!-- <view class="risk-ida" @mouseover="handleMouseOver1(item.company_name)"
										@mouseout="handleMouseOut1(item.company_name)" style="width: 14%;">
										{{item.company_name}}
									</view> -->

									<uni-tooltip style="width: 14%;" placement="right">
										<view class="risk-list-item">
											{{item.company_name.length>10?item.company_name.substring(0,10)+'...':item.company_name}}

										</view>
										<template v-slot:content>
											<view>
												{{item.company_name}}
											</view>
										</template>
									</uni-tooltip>


									<!-- <view class="risk-list-item" style="width: 14%;"
										@mouseover="handleMouseOver4(item.area)" @mouseout="handleMouseOut4(item.area)">
										{{item.area}}
									</view> -->
									<uni-tooltip style="width: 14%;" placement="right">

										<view class="risk-list-item" style="width: 100%;" v-if="item.area">
											{{item.area.length>10?item.area.substring(0,10)+'...':item.area}}
										</view>
										<view class="risk-list-item" style="width: 100%;" v-else>
											{{item.area}}
										</view>
										<template v-slot:content>
											<view>
												{{item.area}}
											</view>
										</template>
									</uni-tooltip>



									<!-- <view class="text-jq" style="width: 22.4%;"
										@mouseover="handleMouseOver2(item.main_risk)"
										@mouseout="handleMouseOut2(item.main_risk)">
										{{item.main_risk}}
									</view> -->
									<uni-tooltip style="width: 22.4%;" placement="right">
										<view class="risk-list-item" style="width: 100%;">
											{{item.main_risk.length>18?item.main_risk.substring(0,18)+'...':item.main_risk}}
										</view>
										<template v-slot:content>
											<view>
												{{item.main_risk}}
											</view>
										</template>
									</uni-tooltip>


									<!-- 风险颜色 -->
									<view v-if="item.danger_level=='1'" class="risk-list-item"
										style="width: 11.2%;background-color: #447ed9;">
										低风险
									</view>
									<view v-if="item.danger_level=='2'" class="risk-list-item"
										style="width: 11.2%;background-color: #ffaa00;">
										一般风险
									</view>
									<view v-if="item.danger_level=='3'" class="risk-list-item"
										style="width: 11.2%;background-color: #ff5500;">
										较大风险
									</view>
									<view v-if="item.danger_level=='4'" class="risk-list-item"
										style="width: 11.2%;background-color: #ff0000;">
										重大风险
									</view>

									<!-- <view class="text-jq" style="width: 11.2%;"
										@mouseover="handleMouseOver3(item.control_measures)"
										@mouseout="handleMouseOut3(item.control_measures)">
										{{item.control_measures}}
									</view> -->

									<uni-tooltip style="width: 11.2%;" placement="left">
										<view class="risk-list-item" style="width: 100%;">
											{{item.control_measures.length>8?item.control_measures.substring(0,8)+'...':item.control_measures}}
										</view>
										<template v-slot:content>
											<view>
												{{item.control_measures}}
											</view>
										</template>
									</uni-tooltip>


									<!-- <view class="risk-list-item" style="width: 11.2%;">
										{{item.responsible_department||'暂无'}}
									</view> -->

									<uni-tooltip style="width: 11.2%;" placement="left">
										<view class="risk-list-item" style="width: 100%;">
											{{item.responsible_department.length>8?item.responsible_department.substring(0,8)+'...':item.responsible_department}}
										</view>
										<template v-slot:content>
											<view>
												{{item.responsible_department}}
											</view>
										</template>
									</uni-tooltip>
								</view>

								<view style="width: 100%;border-top: 2rpx solid black;">

								</view>

							</scroll-view>

						</view>

					</view>
					<!-- 下方抽屉结束 -->
					<!-- 跟随鼠标显示详细信息 -->
					<view class="hover-box1" v-show="hover_box1">
						{{hover_box_content || '暂无'}}
					</view>

					<view class="hover-box2" v-show="hover_box2">
						{{hover_box_content || '暂无'}}
					</view>

					<view class="hover-box3" v-show="hover_box3">
						{{hover_box_content || '暂无'}}
					</view>

					<view class="hover-box4" v-show="hover_box4">
						{{hover_box_content || '暂无'}}
					</view>

				</view>

			</view>




			<!-- 	<map 
			      id="container"
			      :latitude="latitude"
			      :longitude="longitude"
			    ></map> -->

		</view>


	</view>
</template>
<script>
	// 在页面中使用
	import {
		enableCanvasOptimization
	} from '@/utils/canvasOptimize';

	import AMapLoader from "@amap/amap-jsapi-loader";
	import RightDrawer from '@/components/right-drawer.vue';
	import Popup from '@/components/popup.vue';
	window._AMapSecurityConfig = {
		securityJsCode: "09a48f37d491d158fb61559d32ef0f18",
	};
	export default {
		components: {
			RightDrawer,
			Popup

		},
		name: "map-view",
		mounted() {
			this.initAMap();

		},
		unmounted() {
			this.map?.destroy();
		},
		onLoad() {
			const optimized = enableCanvasOptimization();
			console.log('Canvas优化状态:', optimized);
			// this.initAMap();

			// this.getCompanyList();
			this.getAreaList();
			this.getStandardList();
			this.getTypeList();
			this.getFileTypeList();
		},

		methods: {
			handleMouseOver1(val) {
				this.hover_box1 = true
				this.hover_box_content = val

			},
			handleMouseOut1(val) {
				this.hover_box1 = false
				this.hover_box_content = ''
			},

			handleMouseOver2(val) {
				this.hover_box2 = true
				this.hover_box_content = val

			},
			handleMouseOut2(val) {
				this.hover_box2 = false
				this.hover_box_content = ''
			},

			handleMouseOver3(val) {
				this.hover_box3 = true
				this.hover_box_content = val

			},
			handleMouseOut3(val) {
				this.hover_box3 = false
				this.hover_box_content = ''
			},

			handleMouseOver4(val) {
				this.hover_box4 = true
				this.hover_box_content = val

			},
			handleMouseOut4(val) {
				this.hover_box4 = false
				this.hover_box_content = ''
			},

			//获取企业信息
			getCompany(item) {
				uni.request({
					url: 'https://anquan.sxpz.vip/GovApi/DangerArea/company_info',
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						id: item.id
					},
					success: (res) => {
						if (res.data.code == 200) {
							console.log('company_info---', res)
							this.company_info = res.data.datas;
						}
					}
				});
			},


			previewDoc(url) {
				// 打开新窗口预览
				window.open(`https://view.officeapps.live.com/op/view.aspx?src=${url}`);
				
				/* uni.navigateTo({
					url: '/pages/index/webView?fileUrl=' + encodeURIComponent(url)
				}) */
			},

			downloadDoc(url) {
				window.open(url, '_blank');
			},
			//获取文档列表
			getStandardList() {
				uni.request({
					url: 'https://anquan.sxpz.vip/GovApi/DangerArea/check_standard',
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data:{
						industry_type:this.file_type,
						file_name:this.file_name
					},
					success: (res) => {
						if (res.data.code == 200) {
							console.log(res)
							this.standard_list = res.data.datas;
						}
						console.log('standard_list', this.standard_list)
					}
				});
			},

			// 抽屉打开关闭事件
			toggleDrawerRight() {
				this.show_map == 1 ? this.show_map = 2 : this.show_map = 1;

				/* if (this.drawerVisible_right) {
					this.closeDrawerRight();
				} else {
					this.openDrawerRight();
				} */
			},
			openDrawerRight() {
				this.drawerVisible_right = true;
				this.drawerVisible = false;
			},
			closeDrawerRight() {
				this.drawerVisible_right = false;
			},
			closeDrawerCenter() {
				this.showPopup = false;
			},

			toggleDrawer() {
				if (this.drawerVisible) {
					this.closeDrawer();
				} else {
					this.openDrawer();
				}
			},
			openDrawer() {
				this.drawerVisible = true;
				this.drawerVisible_right = false;
			},
			closeDrawer() {
				this.drawerVisible = false;
			},
			stopPropagation() {
				// 阻止事件冒泡，避免点击抽屉内容时关闭
			},


			// 切换行业分布和乡镇分布
			changeStyle(val) {
				this.style = val;
			/* 	if (this.style == 1) {
					this.formData.township = ''
				} else {
					this.formData.area = ''
				} */
				this.resetForm()
				// 切换时清空点标记
				this.clearOnlyMarkers()
				this.getCompanyList()
				this.show_map = 1
			},

			//前往检查标准页面
			goCheck() {

				uni.navigateTo({
					url: '/pages/index/checkStandard'
				})
			},

			// 选择乡镇区域
			bindPickerChange(e) {
				console.log(e)
				this.formData.township = this.area_list[e.detail.value];
				this.handleSearch()
			},
			
			// 选择行业类型
			bindPickerChangeType(e) {
				console.log(e)
				this.formData.industry = this.type_list[e.detail.value];
				this.handleSearch()
			},
			
			// 选择检查标准行业类型
			bindPickerChangeFileType(e) {
				console.log(e)
				this.file_type = this.file_type_list[e.detail.value];
				this.getStandardList();
			},

			// 选择风险等级
			bindPickerChange2(e) {
				this.formData.riskLevel = this.riskLevelOptions[e.detail.value];
				if (this.formData.riskLevel == '低风险') {
					this.level = 1
				}
				if (this.formData.riskLevel == '一般风险') {
					this.level = 2
				}
				if (this.formData.riskLevel == '较大风险') {
					this.level = 3
				}
				if (this.formData.riskLevel == '重大风险') {
					this.level = 4
				}
				if (this.formData.riskLevel == '全部') {
					this.level = ''
				}
				this.handleSearch()
			},


			// 重置表单
			resetForm() {
				this.formData = {
					riskLevel: '',
					industry: '',
					companyName: '',
					township: '',
					area: ''
				};
				this.level = ''
				this.handleSearch()
			},

			// 执行搜索
			handleSearch() {
				this.clearOnlyMarkers()
				this.getCompanyList()
			},
			// 重置检查标准
			resetFileForm(){
				this.file_type=''
				this.file_name=''
				this.getStandardList()
			},
			handleSearchFile(){
				this.getStandardList()
			},

			//获取乡镇列表
			getAreaList() {
				uni.request({
					url: 'https://anquan.sxpz.vip/GovApi/DangerArea/area_list',
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						if (res.data.code == 200) {
							this.area_list = res.data.datas;
						}
						// console.log('area_list', this.area_list)
					}
				});
			},
			
			//获取行业类型列表
			getTypeList() {
				uni.request({
					url: 'https://anquan.sxpz.vip/GovApi/DangerArea/type_list',
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data:{
						style:1
					},
					success: (res) => {
						if (res.data.code == 200) {
							this.type_list = res.data.datas;
						}
					}
				});
			},
			//获取检查标准行业类型列表
			getFileTypeList() {
				uni.request({
					url: 'https://anquan.sxpz.vip/GovApi/DangerArea/standard_list',
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data:{
						style:1
					},
					success: (res) => {
						if (res.data.code == 200) {
							this.file_type_list = res.data.datas;
						}
					}
				});
			},
			// 获取企业列表
			getCompanyList() {


				var that = this
				uni.request({
					url: 'https://anquan.sxpz.vip/GovApi/DangerArea/company_total',
					method: 'GET',

					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						type: this.formData.industry,
						nickname: this.formData.companyName,
						level: this.level,
						area: this.formData.area,
						street: this.formData.township,
						style: this.style
					},
					success: (res) => {
						if (res.data.code == 200) {
							console.log(res)
							this.company_list = res.data.datas.list;
							this.all_datas = res.data.datas;
							this.chartData = {
								series: [{
									data: [{
											'name': '重大风险(Ⅰ级)单位',
											'value': parseInt(res.data.datas.level_general),
											'labelText': '重大风险' + parseInt(res.data.datas
												.level_general) + '个'
										},
										{
											'name': '较大风险(Ⅱ级)单位',
											'value': parseInt(res.data.datas.level_great),
											'labelText': '较大风险' + parseInt(res.data.datas
													.level_great) +
												'个'
										},
										{
											'name': '一般风险(Ⅲ级)单位',
											'value': parseInt(res.data.datas.level_high),
											'labelText': '一般风险' + parseInt(res.data.datas
													.level_high) +
												'个'
										},
										{
											'name': '低风险(Ⅳ级)单位',
											'value': parseInt(res.data.datas.level_low),
											'labelText': '低风险' + parseInt(res.data.datas
												.level_low) + '个'
										},
									]
								}]
							}

							// 使用测试数据
							// this.company_list = this.test_object.datas.list;

							//将企业列表循环放入标记
							for (let index = 0; index < this.company_list.length; index++) {
								let item = this.company_list[index];
								/* if(item.company_name.length>10){
									this.company_list[index].company_name_sub = item.company_name.subString(0,10) + '...'
								}else{
									this.company_list[index].company_name_sub = item.company_name
								} */


								let bg_color = '';
								let pic_src = '';
								if (item.danger_level == 1) {
									pic_src = 'http://qiniu.sxpz.vip/2021-01-11_5ffc090683b4a.png'
									bg_color = '#447ed9';

								} else if (item.danger_level == 2) {
									pic_src = 'http://qiniu.sxpz.vip/2021-01-11_5ffc091f36b11.png'
									bg_color = '#ffaa00';
								} else if (item.danger_level == 3) {
									pic_src = 'http://qiniu.sxpz.vip/2021-01-11_5ffc094628291.png'
									bg_color = '#ff5500';
								} else if (item.danger_level == 4) {
									pic_src = 'http://qiniu.sxpz.vip/2021-01-11_5ffc0931d6794.png'
									bg_color = '#ff0000';
								}


								const lng = parseFloat(item.lng);
								const lat = parseFloat(item.lat);
								// console.log('lng--------', this.diagnoseNaN(lng))
								// console.log('lat--------', this.diagnoseNaN(lat))


								if (isNaN(lng) || isNaN(lat)) {
									continue
								}

								//编号加名称
								// let lc = item.sort + ' ' + (item.short_name || item.company_name)
								let lc = item.sort;

								let ptn = [lng, lat];

								that.position.push(ptn)

								/* const content = `<view class="custom-content-marker" style="display: flex;flex-direction: column;align-items: center;">
								<view class="custom-content-marker-texts" style="
								width: 120px;
								border-radius: 5px;
		padding: 5px;
		display: flex;
		align-items: center;
		border: 1px solid #3498db;
		background-color: #fff;
		color: #3498db;"> 
								${lc}
								</view>
								<image style="width: 38px;
		height: 40px;" src="${pic_src}">
								</view>`; 
							
								 */
								const content = `<view class="custom-content-marker" style="display: flex;flex-direction: column;align-items: center;">
														<view class="custom-content-marker-texts" style="
														width: 22px;
														height: 22px;
														border-radius: 50%;
														font-size: 15px;
								padding: 5px;
								display: flex;
								align-items: center;
								justify-content: center;
								background-color: ${bg_color};
								color: #fff;"> 
														${lc}
														</view>
														</view>`;





								that.marker = new AMap.Marker({
									position: ptn,
									offset: new AMap.Pixel(-10, -10),
									content: content, //自定义点标记覆盖物内容,会覆盖icon
									title: item.company_name,
									/* label: {
										direction: top,
										content: lc
									}, */

									icon: new AMap.Icon({
										image: pic_src,
										size: new AMap.Size(28, 28), //图标所处区域大小
										imageSize: new AMap.Size(28, 28) //图标大小
									})

								});
								/* const mk = new AMap.Marker({
									position: that.position,
									offset: new AMap.Pixel(-10, -10),
									title: item.company_name,
									map: that.map,
									icon: new AMap.Icon({
										image: pic_src,
										size: new AMap.Size(28, 28), //图标所处区域大小
										imageSize: new AMap.Size(28, 28) //图标大小
									})

								});
								 */

								// 绑定点击事件
								that.marker.on('click', function() {
									that.open(item);
								});
								that.map.add(that.marker);
							}

						}
					},
					complete(res) {
						console.log('complete--------', res)
					}
				});
			},

			// 专门清空点标记
			clearOnlyMarkers() {
				if (this.position && this.position.length > 0) {
					/* 	this.position.forEach(marker => {
							// 从地图移除
							this.marker.setMap(null); 
						});
						this.position = []; // 清空数组
						this.map.remove(this.marker) */

					// 清空地图上所有覆盖物（包括标记、折线、多边形等）
					this.map.clearMap();
					this.SetMarkerCluster()
					this.drawBounds()
					this.getCompanyList();
					console.log('已清除所有点标记');

				}
			},

			diagnoseNaN(value) {
				const result = {
					a: value,
					b: '',
					c: ''
				};

				if (value === null) {
					result.a = '值为null';
					result.b = '添加空值检查';
				} else if (value === undefined) {
					result.a = '值为undefined';
					result.b = '添加默认值';
				} else if (typeof value === 'object') {
					result.a = '值为对象，不是原始值';
					result.b = '使用value.toString()或JSON.stringify()';
				} else if (typeof value === 'string' && value.trim() === '') {
					result.a = '空字符串';
					result.b = '添加空字符串检查';
				} else if (value.toString().match(/[^0-9.-]/)) {
					result.a = '包含非数字字符';
					result.b = '清理字符串中的非数字字符';
				} else {
					result.a = '其他未知原因';
					result.b = '使用安全转换函数';
				}

				return result;
			},

			addZeroIfNeeded(number) {
				// 将输入转换为数字
				const num = parseFloat(number);
				// 如果不是有效数字，返回原值
				/*  if (isNaN(num)) {
				    return number; 
				  }
				  */
				// 将数字转换为字符串
				const numStr = num.toString();

				// 检查是否有小数点
				if (!numStr.includes('.')) {
					return numStr + '.00000'; // 如果没有小数点，添加小数点后5个0
				}
				console.log('numStr=======', numStr)
				// 分割整数和小数部分
				const [integerPart, decimalPart] = numStr.split('.');

				// 计算当前小数位数
				const currentDecimalLength = decimalPart.length;

				// 如果小数位数少于5位，补零
				if (currentDecimalLength < 5) {
					const zerosToAdd = '0'.repeat(5 - currentDecimalLength);
					return `${integerPart}.${decimalPart}${zerosToAdd}`;
				}
				// console.log('numStr=======',numStr)
				// 如果小数位数等于或多于5位，返回原值
				return numStr;
			},

			optimizeMapPerformance() {
				if (!this.map) return

				// 设置渲染模式为智能模式
				this.map.setFeatures(['bg', 'road', 'building'])

				// 减少不必要的图层
				// this.map.setLayers([])
			},

			initAMap() {

				let that = this
				AMapLoader.load({
						key: "9c159c3b418825e8ca925157a7ebfdb9", // 申请好的Web端开发者Key，首次调用 load 时必填
						version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
						plugins: ["AMap.DistrictSearch"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
					})
					.then((AMap) => {

						that.map = new AMap.Map("container", {
							// 设置地图容器id
							viewMode: "2D", // 是否为3D地图模式
							zoom: 12, // 初始化地图级别
							center: [113.005236, 33.862152], // 初始化地图中心点位置
							// 降低渲染性能以减轻Canvas压力
							pitch: 0,
							rotation: 0,
							animateEnable: false, // 关闭动画
							doubleClickZoom: false, // 关闭双击缩放
							mapStyle: 'amap://styles/macaron',
							resizeEnable: true,
							scrollWheel: true,
							// layers: [new AMap.TileLayer()],
						});





						// 地图加载完成调用
						that.map.on('complete', () => {
							console.log('地图加载完成');
							that.styles = [{
									//聚合量在1-10时，聚合点的样式
									url: "//a.amap.com/jsapi_demos/static/images/blue.png", //图标显示图片的地址
									size: new AMap.Size(32, 32), //图标显示图片的大小
									offset: new AMap.Pixel(-16, -16), //图标定位在地图上的位置相对于图标左上角的偏移值
									textColor: "#fff", //文字的颜色
								},
								{
									//聚合量在11-100时，聚合点的样式
									url: "//a.amap.com/jsapi_demos/static/images/green.png",
									size: new AMap.Size(32, 32),
									offset: new AMap.Pixel(-16, -16),
									textColor: "#fff",
								},
								{
									//聚合量在101-1000时，聚合点的样式
									url: "//a.amap.com/jsapi_demos/static/images/orange.png",
									size: new AMap.Size(36, 36),
									offset: new AMap.Pixel(-18, -18),
								},
							]
							that.SetMarkerCluster()
							that.drawBounds()
							that.getCompanyList();
						});
					})
					.catch((e) => {
						console.log(e);
					});
			},
			ClockMarker(e) {
				// cluster：点击的聚合点对象
				// lnglat：点击的位置点坐标
				// target：点聚合插件对象
				// marker：点击的聚合点所包含的点对象

				// 获取当前点击对象里面的标记
				let clusterData = e.clusterData
				// 获取当前点击的标记，这个地方一直都会有一个,根据points数组里面的weight权限值
				let data = e.cluster.p
				// 如果只有一个了就说明已经点击到标签
				if (clusterData.length <= 1) {
					console.log(data.id);
				} else {
					// 证明还是聚合状态，通过方法放大视图
					let zoom = this.map.getZoom()
					zoom += 2
					this.map.setZoomAndCenter(zoom, [data.lnglat.lng, data.lnglat.lat], true, 300000)
				}
			},
			SetMarkerCluster() {
				this.map.plugin(["AMap.MarkerCluster"], () => {
					console.log(this.points);
					console.log(this.styles);
					let cluster = new AMap.MarkerCluster(this.map, this.points, {
						styles: this.styles,
					});
					cluster.on("click", (e) => { //给每一个点位增加点击事件
						this.ClockMarker(e)
					});
				})
			},
			drawBounds() {
				var that = this
				//加载行政区划插件
				if (!this.district) {
					//实例化DistrictSearch
					var opts = {
						subdistrict: 1, //subdistrict (number) 显示下级行政区级数（行政区级别包括：国家、省/直辖市、市、区/县4个级别），
						//商圈为区/县下一 级，可选值：0、1、2、3，默认值：1 0：不返回下级行政区 1：返回下一级行政区 2：返回下两级行政区 3：返回下三级行政区
						extensions: 'all', //返回行政区边界坐标组等具体信息
						level: 'biz_area', //查询行政级别为  关键字对应的行政区级别或商圈，可选值： country：国家 province：省/直辖市 city：市 district：区/县 biz_area：商圈
						showbiz: true
					};
					this.district = new AMap.DistrictSearch(opts);
				}
				// 获这里写你要获取的城市名称
				let keywords = '宝丰县'
				this.district.search(keywords, (status, result) => {
					console.log('result------------', result);
					if (!result || !result.districtList || !result.districtList[0]) {
						alert('请正确填写名称或更新其他名称')
						// log.warn('请正确填写名称或更新其他名称');
						return
					}

					var bounds = result.districtList[0].boundaries;
					if (bounds) {
						//生成行政区划polygon
						for (var i = 0; i < bounds.length; i += 1) { //构造MultiPolygon的path
							bounds[i] = [bounds[i]]
						}
						let polygon = new AMap.Polygon({
							strokeWeight: 1,
							path: bounds,
							fillOpacity: 0.4,
							fillColor: '#80d8ff',
							strokeColor: '#0091ea'
						});
						that.map.add(polygon)
						that.map.setFitView(polygon); //视口自适应


					}
				});
			},


			open(item) {
				this.getCompany(item);
				this.showPopup = true;
				console.log('open----', this.showPopup);
			},
			close() {
				this.show = false
				console.log('close');
			},
			onPopupClose() {
				console.log('弹窗已关闭');
				// 可以在这里添加关闭后的回调逻辑
			}

		},
		data() {
			return {

				formData: {
					riskLevel: '',
					industry: '',
					companyName: '',
					township: '',
					area: ''
				},
				showPopup: false,
				showRiskLevelPicker: false,
				showTownshipPicker: false,
				riskLevelOptions: [
					'全部', '低风险', '一般风险', '较大风险', '重大风险'

				],

				township_index: 0,
				risk_index: 0,

				company_list: [],
				area_list: [],

				district: undefined,
				map: undefined,
				points: [{
						id: 1,
						weight: 8,
						lnglat: [116.397428, 39.90923]
					},
					{
						id: 2,
						weight: 8,
						lnglat: [116.317428, 39.90523]
					},
					{
						id: 3,
						weight: 1,
						lnglat: [116.327428, 39.81523]
					},
				],
				styles: [],


				currentDate: '',
				activeTownship: null,
				showPlaceholder: true, // 实际使用时设置为false
				currentTownship: {
					name: '请选择区域',
					area: '0km²',
					population: '0万',
					gdp: '0亿元',
					villages: '0个'
				},

				map: null, // 地图实例
				polygons: [], // 多边形覆盖物


				style: 2, //1按行业分布2按乡镇分布
				level: '',

				latitude: 39.909,
				longitude: 116.3974,

				position: [],
				maker: '',
				show: false,
				// 测试数据
				test_object: {},

				company_info: {},

				drawerVisible: false,
				drawerVisible_right: false,
				drawerVisible_center: false,

				standard_list: [],
				chartData: {},
				opts: {
					color: ["#ff6969", "#ff9e69", "#ffcd69", "#70b9e8"],
					padding: [5, 5, 5, 5],
					enableScroll: false,
					extra: {
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: true,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},

				all_datas: {},

				drawerItems: [{
						title: '选项一',
						desc: '这是选项一的描述信息'
					},
					{
						title: '选项二',
						desc: '这是选项二的描述信息'
					},
					{
						title: '选项三',
						desc: '这是选项三的描述信息'
					},
					{
						title: '选项四',
						desc: '这是选项四的描述信息'
					},
					{
						title: '选项五',
						desc: '这是选项五的描述信息'
					}
				],

				hover_box1: false,
				hover_box2: false,
				hover_box3: false,
				hover_box4: false,
				hover_box5: false,
				hover_box_content: '',

				show_map: 1,

				box_top: '',
				box_bottom: '',
				box_left: '',
				box_right: '',
				
				type_index:0,
				type_list:{},
				
				file_type_list:{},
				file_type:'',
				file_name:''

			}
		}
	};
</script>
<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 90vh;
		position: relative;
	}

.scroll-style{
	max-height: 510px;
	::-webkit-scrollbar{
		display: none;
	}
}


	.hover-box1 {
		position: absolute;
		z-index: 999;
		bottom: 120px;
		left: 31%;
		padding: 20rpx;
		width: 500rpx;
		border-radius: 20rpx;
		background-color: #fff;
		box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
	}

	.hover-box2 {
		position: absolute;
		z-index: 999;
		bottom: 100px;
		left: 65%;
		padding: 20rpx;
		width: 500rpx;
		border-radius: 20rpx;
		background-color: #fff;
		box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
	}

	.hover-box3 {
		position: absolute;
		z-index: 999;
		bottom: 100px;
		left: 60%;
		padding: 20rpx;
		width: 500rpx;
		border-radius: 20rpx;
		background-color: #fff;
		box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
	}

	.hover-box4 {
		position: absolute;
		z-index: 999;
		bottom: 100px;
		left: 44%;
		padding: 20rpx;
		width: 500rpx;
		border-radius: 20rpx;
		background-color: #fff;
		box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
	}

	.custom-content-marker {
		width: 100px;
		height: 100px;
	}

	.custom-content-marker image {
		width: 25px;
		height: 28px;
	}

	.custom-content-marker-texts {
		width: 100px;
		padding: 10rpx;
		border: 1px solid #3498db;
		background-color: #fff;
		color: #3498db;
		border-radius: 5px;
	}

	.map-view {
		width: 100%;
		height: 100%;
		/* 硬件加速 */
		transform: translateZ(0);
		will-change: transform;
	}

	// 中间弹窗
	.center-box {
		width: 40%;
		height: 60vh;
		// padding: 30rpx;
		border-radius: 20rpx;
		background-color: #fff;
		z-index: 9999;
		position: fixed;
		top: 15%;
		left: 30%;

		.title-info {
			padding: 20rpx;
			background: #3498db;
			display: flex;

			align-items: center;

			justify-content: space-between;
			color: #fff;
			border-radius: 20rpx 20rpx 0 0;

			.title-info-title {
				font-size: 34rpx;

				font-weight: bold;
			}

			.title-info-close {
				font-size: 50rpx;
				padding: 20rpx;
				width: 10%;
				text-align: center;
			}
		}

		.center-box-title {
			font-size: 34rpx;
			padding: 20rpx;
			font-weight: bold;
		}

		.center-box-content {
			margin-top: 10rpx;
			margin-bottom: 30rpx;
			padding: 20rpx;
			border-radius: 10rpx;
			background-color: #f4f4f5;
		}
	}

	// 四色风险图
	.risk-box {
		position: fixed;
		bottom: 100px;
		right: 30px;
		width: 500px;
		height: 300px;
		border-radius: 12rpx;
		background-color: white;
		z-index: 997;
		box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
	}

	.risk-color {
		position: fixed;
		bottom: 100px;
		right: 30px;
		z-index: 997;

		.risk-color-item {
			color: white;
			padding: 30rpx;
			background-color: #1a3c6e;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
		}
	}

	//右侧抽屉窗口内容
	.right-content {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #f7f7f7;

		.top {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 18px;
			height: 80rpx;
			border: 1rpx solid #eeeeee;
			padding: 10rpx;
			font-weight: bold;
		}
	}

	.right-content-list {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;

		.item {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 16px;
			height: 80rpx;
			border: 1rpx solid #eeeeee;
			padding: 10rpx;
		}
	}

	// 抽屉窗口
	.content {
		background: white;
		padding: 30px;
		border-radius: 12px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
		margin-bottom: 40px;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.title {
		font-size: 22px;
		font-weight: 600;
		color: #2c3e50;
		margin-bottom: 10px;
		text-align: center;
	}

	.desc {
		font-size: 16px;
		color: #7f8c8d;
		margin-bottom: 10px;
		text-align: center;
	}

	/* 圆形按钮样式 */
	.floating-btn-right {
		position: fixed;
		top: 30px;
		right: 30px;
		width: 50px;
		height: 50px;
		border-radius: 12rpx;
		background-color: #3498db;
		color: white;
		box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 997;
		transition: all 0.3s ease;
	}

	.floating-btn-right.rotated_right {
		transform: rotate(180deg);
	}

	.arrow-right {
		width: 20px;
		height: 20px;
		border: solid white;
		border-width: 0 3px 3px 0;
		display: inline-block;
		transform: rotate(45deg);
	}

	.floating-btn {
		position: fixed;
		bottom: 30px;
		right: 30px;
		width: 50px;
		height: 50px;
		border-radius: 12rpx;
		background-color: #3498db;
		color: white;
		box-shadow: 0 4px 12px rgba(52, 152, 219, 0.4);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 997;
		transition: all 0.3s ease;
	}

	.floating-btn.rotated {
		transform: rotate(180deg);
	}

	.arrow {
		width: 20px;
		height: 20px;
		border: solid white;
		border-width: 0 3px 3px 0;
		display: inline-block;
		transform: rotate(45deg);
	}

	/* 遮罩层样式 */
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 998;
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s ease;
	}

	.mask.show {
		opacity: 1;
		visibility: visible;
	}

	.mask-center {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s ease;
	}

	.mask-center.centershow {
		opacity: 1;
		visibility: visible;
	}

	.mask-right {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 998;
		opacity: 0;
		visibility: hidden;
		transition: all 0.3s ease;
	}

	.mask-right.show_right {
		opacity: 1;
		visibility: visible;
	}

	/* 抽屉样式 */
	.drawer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: white;
		border-radius: 16px 16px 0 0;
		z-index: 999;
		transform: translateY(100%);
		transition: transform 0.3s ease;
		padding: 10px;
		padding-bottom: 0;
		box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.15);
		max-height: 50vh;
		overflow-y: auto;
	}

	.drawer.show {
		transform: translateY(0);

	}

	.drawer-header {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 10px;
		border-bottom: 1px solid #eee;
		margin-bottom: 5px;
	}

	.drawer-title {
		font-size: 18px;
		font-weight: 600;
		color: #2c3e50;
		text-align: center;
	}

	.close-btn {
		font-size: 24px;
		color: #7f8c8d;
		width: 30px;
		height: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
	}

	.drawer-content {
		// padding: 10px 0;
		padding-bottom: 0;
	}

	.drawer-item {
		padding: 15px;
		border-bottom: 1px solid #f0f0f0;
		border-radius: 8px;
		// margin-bottom: 5px;
		display: flex;
		flex-direction: column;
	}

	.drawer-item:last-child {
		border-bottom: none;
	}

	.drawer-item-title {
		font-weight: 600;
		margin-bottom: 5px;
	}

	.drawer-item-desc {
		font-size: 14px;
		color: #7f8c8d;
	}

	// 风险点列表
	.risk-list {
		display: flex;
		flex-direction: row;
		align-items: center;
		// justify-content: center;
		border: 1rpx solid black;
		border-bottom: 0;
		background-color: #e3edf9;

		.risk-list-item {
			height: 50rpx;
			border: 1rpx solid black;
			// padding: 8rpx;
			text-align: center;
			border-bottom: 0;
			// 多行文字截取
			// display: -webkit-box;
			// -webkit-box-orient: vertical;
			// -webkit-line-clamp: 2;
			// overflow: hidden;

			// 单行文字截取
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			// display: block;
		}
	}

	.text-center {}

	.text-jq {
		height: 50rpx;
		border: 1rpx solid black;
		padding: 8rpx;
		background-color: #e3edf9;
		text-align: center;
		border-bottom: 0;
		/* display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden; */

		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.risk-ida {
		height: 50rpx;
		border: 1rpx solid black;
		padding: 8rpx;
		background-color: #e3edf9;
		text-align: center;
		border-bottom: 0;
		/* display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden; */

		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.uni-tooltip-popup {
		z-index: 1000;
		display: none;
		position: absolute;
		background-color: #333;
		border-radius: 8px;
		color: #fff;
		font-size: 12px;
		text-align: left;
		line-height: 16px;
		padding: 12px;
		overflow: auto;
	}

	.risk-ida:hover .uni-tooltip-popup {
		display: block;
	}

	/* 优化 Canvas 渲染 */
	canvas {
		image-rendering: -webkit-optimize-contrast;
		image-rendering: crisp-edges;
		/* 减少重绘 */
		will-change: transform;
	}

	/* 地图样式优化 */
	::v-deep .amap-container {
		transform: translateZ(0);
	}

	::v-deep .amap-layers {
		/* 优化图层渲染 */
		transform-style: preserve-3d;
	}

	.custom-content-marker {
		width: 50rpx;
		height: 60rpx;
	}

	.custom-content-marker img {
		width: 36rpx;
		height: 40rpx;
	}


	.btn-1 {
		background-color: #f8f8f8;
		color: #666;
	}

	.btn-2 {
		background-color: #2462bb;
		color: #fff;
	}

	// 地图右下方四色显示
	.map-box {
		position: absolute;
		width: 200rpx;
		height: 200rpx;
		background-color: black;
		z-index: 100;
	}

	.search-line {
		padding: 20rpx 30rpx;
	}

	.header {
		background: linear-gradient(135deg, #2462bb 0%, #1e3799 100%);
		color: white;
		padding: 20rpx 30rpx;
		/* display: flex;
	  justify-content: space-between;
	  align-items: center; */
		text-align: center;

		.title {
			color: white;
			font-size: 36rpx;
			font-weight: 600;
		}

		.subtitle {
			font-size: 24rpx;
			opacity: 0.9;
			margin-top: 8rpx;
		}

		.date {
			font-size: 26rpx;
		}
	}

	.main-content {
		flex: 1;
		display: flex;
		flex-direction: row;
		height: calc(100% - 120rpx);

		.sidebar {
			width: 320rpx;
			background-color: #fff;
			padding: 20rpx;
			padding-top: 0;
			margin-top: 100rpx;
			display: flex;
			flex-direction: column;

			.section {

				.section-title {
					font-size: 30rpx;
					color: #1a3c6e;
					font-weight: 600;
					margin-bottom: 20rpx;
					display: block;
				}
			}

			.township-list {
				flex: 1;
				max-height: 700rpx;

				.township-item {
					padding: 20rpx;
					padding-top: 0;
					background-color: #f8fafd;
					margin-bottom: 16rpx;
					border-radius: 12rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					&.active {
						background-color: #e3edf9;
						border-left: 8rpx solid #2462bb;
						font-weight: 500;
					}

					.township-name {
						font-size: 28rpx;
						color: #333;
					}

					.icon-right {
						font-family: 'iconfont';
						color: #999;
					}
				}
			}

			.selected-area {
				background-color: #f8fafd;
				padding: 20rpx;
				border-radius: 12rpx;
				margin: 20rpx 0;
				border-left: 8rpx solid #2462bb;

				.area-title {
					font-size: 28rpx;
					color: #1a3c6e;
					font-weight: 600;
					margin-bottom: 20rpx;
					display: block;
				}

				.area-stats {
					display: grid;
					grid-template-columns: 1fr 1fr;
					gap: 16rpx;

					.stat-item {
						background-color: #fff;
						padding: 16rpx;
						border-radius: 8rpx;
						font-size: 24rpx;
						box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
						display: flex;
						flex-direction: column;

						.stat-label {
							color: #666;
							margin-bottom: 8rpx;
						}

						.stat-value {
							color: #333;
							font-weight: 500;
						}
					}
				}
			}

			.action-buttons {
				// margin-top: 50rpx;

				.btn {
					width: 100%;
					height: 50rpx;
					padding: 20rpx;
					border-radius: 8rpx;
					margin-bottom: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					&.primary {
						background-color: #2462bb;
						color: white;
					}

					&.secondary {
						background-color: #f0f2f5;
						color: #1a3c6e;
					}

					text {
						font-size: 32rpx;
					}
				}
			}
		}

		.map-container {
			flex: 1;
			position: relative;

			.map {
				width: 100%;
				height: 100%;
			}

			.map-placeholder {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: #aad3df;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #2c3e50;

				.placeholder-text {
					font-size: 36rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}

				.placeholder-subtext {
					font-size: 24rpx;
				}
			}
		}
	}

	// 响应式适配
	@media (max-width: 768px) {
		.main-content {
			flex-direction: column;

			.sidebar {
				width: 100%;
				order: 1;
			}

			.map-container {
				height: 500rpx;
				order: 2;
			}
		}
	}

	// 搜索栏
	.search-container {
		// padding-left: 320rpx;
	}

	.search-header {
		border-bottom: 1rpx solid #eee;

		.search-title {
			font-size: 26rpx;
			font-weight: 600;
			color: #333;
		}
	}

	.search-form {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		padding: 15rpx 0;
		padding-right: 20px;
	}

	.form-item {
		display: flex;
		align-items: center;
		justify-content: center;

		.item-label {
			display: block;
			font-size: 16px;
			color: #666;
		}

		.item-input {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 200rpx;
			height: 50rpx;
			// padding: 0 20rpx;
			padding-left: 10rpx;
			border: 1rpx solid #ddd;
			border-radius: 8rpx;
			background-color: #f9f9f9;
			margin-left: 20rpx;

			.selected-text {
				display: flex;
				align-items: center;
				font-size: 22rpx;
				color: #333;

				&.placeholder {
					color: #999;
				}
			}

			.icon-down {
				font-family: 'iconfont';
				color: #999;
			}
		}

		input {
			width: 200rpx;
			height: 50rpx;
			// padding: 0 20rpx;
			border: 1rpx solid #ddd;
			border-radius: 8rpx;
			font-size: 22rpx;
			background-color: #f9f9f9;
		}
	}

	.action-buttons {
		display: flex;
		justify-content: space-between;

		.btn {
			flex: 1;
			width: 180rpx;
			height: 60rpx;
			border-radius: 8rpx;
			font-size: 16px;
			display: flex;
			align-items: center;
			justify-content: center;

			&.reset {
				background-color: #f8f8f8;
				color: #666;
				margin-right: 20rpx;
				border: 1rpx solid #ddd;
			}

			&.search {
				background-color: #2462bb;
				color: #fff;
				margin-left: 20rpx;
			}
		}
	}



	// 响应式适配
	@media (max-width: 768px) {
		.search-container {
			margin: 10rpx;
			padding: 15rpx;
		}

		.form-item {
			margin-bottom: 20rpx;
		}

		.action-buttons {
			flex-direction: column;

			.btn {
				margin: 10rpx 0;
				width: 100%;
			}
		}
	}
</style>